<div class="padding-bottom-24" [ngClass]="isMobile?'wrap-mobile':'wrap'">
  <nz-steps [nzCurrent]="current">
    <nz-step nzTitle="分配设备"></nz-step>
    <nz-step nzTitle="查看要分配设备"></nz-step>
    <nz-step nzTitle="分配结果"></nz-step>
  </nz-steps>
  <nz-spin [nzSpinning]="isSpinning">

    <div class="steps-content" *ngIf="current===0">
      <form nz-form [formGroup]="formModel">

        <div nz-row>
          <div nz-col nzSpan="16" nzOffset="4">
            <nz-form-item>
              <nz-form-label [nzSpan]="8" nzRequired nzFor="startDevice">开始号段</nz-form-label>
              <nz-form-control [nzSpan]="8" nzErrorTip="请输入开始号段">
                <input type="text" nz-input placeholder="请输入开始号段" formControlName="startDevice"/>
              </nz-form-control>
            </nz-form-item>

            <nz-form-item>
              <nz-form-label [nzSpan]="8" nzRequired nzFor="endDevice">结束号段</nz-form-label>
              <nz-form-control [nzSpan]="8" nzErrorTip="请输入结束号段">
                <input type="text" nz-input placeholder="请输入结束号段" formControlName="endDevice"/>
              </nz-form-control>
            </nz-form-item>

            <nz-form-item>
              <nz-form-label [nzSpan]="8" nzRequired nzFor="agencyId">合作伙伴</nz-form-label>
              <nz-form-control [nzSpan]="8" nzErrorTip="请选择合作伙伴">
                <nz-select formControlName="agencyId" nzShowSearch nzAllowClear nzPlaceHolder="请选择合作伙伴"
                           (ngModelChange)="updateRebateAgencyId($event)"
                >
                  <nz-option *ngFor="let item of agencyList" nzLabel="{{item.name}}({{item?.agencyNo}})"
                             [nzValue]="item.id"></nz-option>
                </nz-select>
              </nz-form-control>
            </nz-form-item>

            <nz-form-item>
              <nz-form-label [nzSpan]="8" nzFor="name">主板/网络类型</nz-form-label>
              <nz-form-control [nzSpan]="8" nzErrorTip="请选择系统类型">
                <nz-select formControlName="syntheticType" nzShowSearch nzAllowClear nzPlaceHolder="请选择系统类型">
                  <nz-option nzLabel="安卓板兑币机" nzValue="1"></nz-option>
                  <nz-option nzLabel="安卓板售货机" nzValue="2"></nz-option>
                  <nz-option nzLabel="安卓板门闸机" nzValue="3"></nz-option>
                  <nz-option nzLabel="安卓板存币存票机" nzValue="4"></nz-option>
                  <nz-option nzLabel="蓝牙售货机" nzValue="5"></nz-option>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
          </div>
        </div>

        <div nz-row nzJustify="center">
          <div nz-col>
            <nz-form-item>
              <nz-form-control nz-col style="margin-right: 50px" *ngIf="userInfo.roleId == 1">
                <button nz-button nzType="primary" (click)="anewAllocate()">重新分配</button>
              </nz-form-control>
              <nz-form-control nz-col>
                <button nz-button nzType="primary" (click)="noAnewAllocate()">新分配</button>
              </nz-form-control>
            </nz-form-item>
          </div>
        </div>

      </form>
    </div>


    <div class="steps-table" *ngIf="current===1">

      <div class="statis">
        <span class="item">
          分配总数：<span class="text-red">{{distributionCount}}</span>
        </span>
        <span class="item">
          要分配的机构：<span class="text-red">{{agencyName}}</span>
        </span>
      </div>


      <nz-table #nzTable [nzData]="listOfData" nzTableLayout="fixed"
                [(nzPageIndex)]="pageHelper.currentPage" [nzFrontPagination]="false"
                (nzPageIndexChange)="nzPageIndexChange($event)"
                [(nzPageSize)]="pageHelper.pageSize" [nzTotal]="pageHelper.totalItems"
                [nzScroll]="{ x: 'auto' }">
        <thead>
        <tr>
          <th></th>
          <th>设备号</th>
          <th>状态</th>
          <th>合作伙伴</th>
        </tr>
        </thead>
        <tbody>
        <ng-container *ngFor="let data of nzTable.data">
          <tr>
            <td
              [nzChecked]="baseService.zorro.setOfCheckedId.has(data.id)"
              [nzDisabled]="data.disabled"
              (nzCheckedChange)="checkedItem(data.id, $event,1)"
            ></td>
            <td nzEllipsis>{{ data.deviceNo }}</td>
            <td nzEllipsis>
              <span *ngIf="data.status == 0">下架</span>
              <span *ngIf="data.status == 1">在营</span>
              <span *ngIf="data.status == 2">故障</span>
              <span *ngIf="data.status == 3">未激活</span>
              <span *ngIf="data.status == 4">解绑</span>
            </td>
            <td nzEllipsis>{{data.agencyName}}</td>
          </tr>
          <tr nzEllipsis [nzExpand]="expandSet.has(data.id)">
            <span>{{ data.description }}</span>
          </tr>
        </ng-container>
        </tbody>
      </nz-table>
      <div nz-row nzJustify="center">
        <div class="item" nz-col nzXs="12" nzSm="24" nzMd="12" nzLg="8" nzXl="2">
          <nz-form-item>
            <nz-form-control [nzSpan]="16">
              <button nz-button nzType="default" (click)="lastStep(1)">上一步</button>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div class="item" nz-col nzXs="12" nzSm="24" nzMd="12" nzLg="8" nzXl="2">
          <nz-form-item>
            <nz-form-control [nzSpan]="16" >
              <button nz-button nzType="primary" (click)="nextStep(1)">确定分配</button>
            </nz-form-control>
          </nz-form-item>
        </div>
<!--        <div nz-col>-->
<!--          <nz-form-item>-->
<!--            <nz-form-control nz-col>-->
<!--              <button nz-button nzType="default" (click)="affirm(1)">上一步</button>-->
<!--            </nz-form-control>-->
<!--          </nz-form-item>-->
<!--          <nz-form-item>-->
<!--            <nz-form-control nz-col>-->
<!--              <button nz-button nzType="primary" (click)="affirm(1)">下一步</button>-->
<!--            </nz-form-control>-->
<!--          </nz-form-item>-->
<!--        </div>-->
      </div>
    </div>


    <div class="steps-table" *ngIf="current===2">

      <div class="statis">
        <span class="item">
          分配成功总数：<span class="text-red">{{deviceList?.distributionSucceedCount}}</span>
          分配失败总数：<span class="text-red">{{deviceList?.distributionFailCount}}</span>
        </span>
      </div>




      <nz-table
        #nzTable [nzData]="deviceList?.distributionFailList"
           (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
      >
        <thead>
        <tr>
          <th>设备号</th>
          <th>所在合作伙伴</th>
          <th>失败原因</th>
          <th>状态</th>
          <th>注册时间</th>
        </tr>
        </thead>
        <tbody>
        <ng-container *ngFor="let data of nzTable.data">
          <tr>
            <td nzEllipsis>{{ data.deviceNo }}</td>
            <td nzEllipsis>{{ data.agencyName }}</td>
            <td nzEllipsis>{{ data.failReason }}</td>
            <td nzEllipsis>
              <span *ngIf="data.status == 0">下架</span>
              <span *ngIf="data.status == 1">在营</span>
              <span *ngIf="data.status == 2">故障</span>
              <span *ngIf="data.status == 3">未激活</span>
              <span *ngIf="data.status == 4">解绑</span>
            </td>
            <td nzEllipsis>{{ data.createTime | date: 'yyyy-MM-dd HH:mm:ss'}}</td>

          </tr>
          <tr nzEllipsis [nzExpand]="expandSet.has(data.id)">
            <span>{{ data.description }}</span>
          </tr>
        </ng-container>
        </tbody>
      </nz-table>
    </div>

  </nz-spin>
</div>


<!--指定收款人员-->
<nz-modal [(nzVisible)]="isVisible"
           nzTitle="添加下级合作伙伴机构"
          (nzOnCancel)="handleCancel()"
          (nzOnOk)="handleOk()"
          [nzOkLoading]="isSpinning"
>
  <form nz-form [formGroup]="formModel">
  <nz-form-item>
    <nz-form-label [nzSpan]="6" nzRequired nzFor="agencyId">指定设备返佣</nz-form-label>
    <nz-form-control [nzSpan]="14" nzErrorTip="请选择指定设备返佣">
      <nz-select formControlName="rebateAgencyId" nzShowSearch nzAllowClear nzPlaceHolder="请选择指定设备返佣"
      >
        <nz-option *ngFor="let item of agencyList" nzLabel="{{item.name}}({{item?.agencyNo}})"
                   [nzValue]="item.id"></nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>
    <nz-alert class="alert" nzType="success" nzMessage="指定返佣是指一个设备的交易额到达一定的额度后的对合作伙伴返佣，
           重新分配时不会改动指定返佣人员"></nz-alert>
  </form>
</nz-modal>
